<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>canvas.magnifier.js</title>
    <script src="canvas.magnifier.js"></script>
    <script src="demo.js"></script>
    <style>
        .section {
            margin: 15px;
            width: 100%;
            height: 500px;
        }
        
        .section>canvas {
            float: left;
            border: 1px solid #000;
        }
        
        body {
            background: #f0f0f0;
            padding: 20px;
        }
    </style>
</head>

<body>
    <h1>canvas.magnifier.js</h1>
    <h2>simple usage</h2>
    <div class="section">
        <canvas id="demo_canvas"></canvas>

    </div>
    <h2>with some custom settings</h2>
    <div class="section">
        <canvas id="demo_canvas1"></canvas>
    </div>
    <h2>try to scroll your mouse</h2>
    <div class="section">
        <canvas id="demo_canvas2"></canvas>
        <div id="canvas2_magnifier" style="width:200px;height:400px;border:1px solid #000;float:left;"></div>
    </div>
    <h2>more customs</h2>
    <div class="section">
        <canvas id="demo_canvas3"></canvas>
    </div>

</body>

</html>